<template>
<div class="dd">
    <div class="info">
        <div class="dd-title">投票设置</div>
        <p class="worn">请选择过候选人和投票人之后在来发布投票</p>
        <!-- <p class="worn" v-if="this.vStatus"> 当前正在进行的投票是{{this.themeName}}</p> -->
        <div>
            <span class="intro">本次投票名称:</span>
            <input type="text" class="dd-input" v-model="theme" autofocus="autofocus">
            <span class="intro">胜出人数: </span>
            <input type="text" class="dd-input" v-model="winnum">
        </div>
        <div>
            <span class="intro">计票人: </span>
            <input type="text" class="dd-input" v-model="scrutineer">
            <span class="intro">监票人: </span>
            <input type="text" class="dd-input" v-model="teller">
        </div>
            <!-- <span class="intro">评分模式</span> -->
            <div class="ipt-title">评分模式</div>
            <input type="radio" name="schema" class="dd-mo" @click="handleslelct('0')">

            <div class="ipt-title">投票模式</div>
            <input type="radio" name="schema" class="dd-mo" @click="handleslelct('11')">

            <div ref="score" class="hide">
               <div class="ipt-title">0-100</div>
               <input type="radio" name="socre" class="dd-mo" @click="handleslelct('00')">
               <div class="ipt-title">60-100</div>
               <input type="radio" name="socre" class="dd-mo" @click="handleslelct('01')">
               <div class="ipt-title">80-100</div>
               <input type="radio" name="socre" class="dd-mo" @click="handleslelct('02')">
            </div>

            <!-- <span class="intro">投票模式</span> -->
            <div ref="vote" class="hide">
                <span class="intro" >赞成票每人可投:</span>
                <input type="text" class="dd-input"  v-model="vn">
            </div>
        <div class="dd-button" @click="handleSubmitClick" :class="{active: this.judge }">提交</div>
    </div>
</div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'Vuex'
export default {
  name: 'set',
  data () {
    return {
      theme: '',
      teller: '',
      scrutineer: '',
      schema: '',
      winnum: '',
      vn: ''
    }
  },
  computed: {
    ...mapState(['userId']),
    ...mapState(['vStatus']),
    // ...mapState(['themeName']),
    judge () {
      return this.theme === '' || this.scrutineer === '' || this.teller === '' || this.winnum === '' || this.schema === ''
    }
  },
  methods: {
    ...mapActions(['changeVstatus']),
    ...mapActions(['curvoteTheme']),
    handleslelct (num) {
      this.schema = num
      if (num === '0') {
        this.schema = ''
        this.$refs.score.style.display = 'block'
        this.$refs.vote.style.display = 'none'
      } else if (num === '11') {
        this.schema = num
        this.$refs.score.style.display = 'none'
        this.$refs.vote.style.display = 'block'
      }
      // console.log(this.schema)
    },
    handleSubmitClick () {
      if (this.judge) {
        swal('您还没有设置完成', '', 'error')
      } else {
        if (this.vStatus) {
          const verify = confirm('您是否想要重置投票')
          if (verify) {
            this.getAxios()
          }
        } else {
          // console.log(this.theme, this.scrutineer, this.teller, this.schema, this.winnum, this.judge)
          this.getAxios()
        }
      }
    },
    getAxios () {
      axios.post('http://192.168.43.188:8081/setVoteBase', {
        'mid': this.userId,
        'sn': this.teller,
        'tn': this.scrutineer,
        'theme': this.theme,
        'mode': this.schema,
        'winnum': this.winnum,
        'anum': this.vn
      }).then(({status, data}) => {
        // console.log(data)
        if (status === 200) {
          if (data.msg === '成功初始化第一轮投票') {
            // this.curvoteTheme(this.theme)
            this.theme = ''
            this.scrutineer = ''
            this.telller = ''
            this.schema = ''
            this.winnum = ''
            this.vn = ''
            this.changeVstatus(true)
            swal('设置成功', '', 'success')
            this.$emit('getCinfo')
          } else {
            swal(data.msg, '', 'error')
          }
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    }
  },
  updated () {
    if (this.schema === '11') {
      this.show = true
      // console.log('投票模式')
    } else if (this.schema === '00') {
      this.show = false
      // console.log('评分模式 0-100')
    } else if (this.schema === '01') {
      this.shoe = false
      // console.log('评分模式 80-100')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.dd
    font-size: .32rem
    .info
        margin: 0 $width
        text-align: center
        .dd-title
            //border-top: .02rem dashed #555
            border-bottom: .02rem dashed #555
            line-height: 1rem
            text-align: center
            font-weight: 700
            margin-bottom: .7rem
        .worn
            line-height: .6rem
            color: red
            font-size: .32rem
        .intro
            display: inline-block
            width: 20%
            text-align: right
        .dd-input
            border: .02rem solid #555
            margin: .40rem .2rem
            width: 25%
        .dd-input:focus
           border: .02rem $bgcolor solid
        .dd-button
            background: $bgcolor
            width: 2rem
            line-height: .5rem
            border-radius: .1rem
            text-align: center
            margin: .5rem auto
        .dd-mo
            margin-right: .4rem
            border: .02rem solid #000
        .ad-button
            overflow: hidden
            // display: block
            background: $bgcolor
            font-size: .32rem
            padding: .2rem .2rem
            margin: .2rem
            border-radius: .1rem
        .hide
           display: none
        .ipt-title
            display: inline-block
            padding: .5rem .2rem
        .active
            background: #666
            courser: no drop
</style>
